<script setup lang="ts">
import { UniGridOnChangeEvent } from '@uni-helper/uni-ui-types/index'

const list = [
  {
    img: '/static/demo/hot.png',
    title: '热门',
  },
  {
    img: '/static/demo/discount.png',
    title: '折扣',
  },
  {
    img: '/static/demo/new.png',
    title: '新品',
  },
  {
    img: '/static/demo/all.png',
    title: '全部商品',
  },
]
</script>

<template>
  <view class="layout">
    <view class="menu-list">
      <view class="menu-item" v-for="(item, index) in list" :key="index">
        <view>
          <image
            style="width: 88rpx; height: 88rpx; margin-bottom: 5rpx"
            class="menu-img"
            :src="item.img"
          ></image>
        </view>
        <view class="menu-title">{{ item.title }}</view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import './tpl';
.menu-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;

  > .menu-item {
    width: 20%;
    margin: 20rpx 0;
    text-align: center;
    // flex: 1;
  }
}
.menu-img {
  display: flex;
  width: 88rpx;
  height: 88rpx;
  margin: 0 auto;
}
.menu-title {
  font-size: 24rpx;
}
</style>
